<template>
    <div>
        <div class="filter-container" style="margin-bottom: 20px;">
            <el-select v-model="listQuery.importance" clearable style="width: 200px;" class="filter-item">
                <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-input v-if="listQuery.importance!=='事件类型'" v-model="listQuery.parameter"  style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-select v-if="listQuery.importance==='事件类型'" v-model="listQuery.parameter" class="filter-item" placeholder="选择">
              <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
            </el-select>
            <el-button class="blue-button" icon="el-icon-search" align="center" style="margin-left: 10px;" @click="handleFilter">
                搜索
            </el-button>
          <i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" style="margin-left: 10px;" @click="iconClick" />
        </div>
      <el-table
          :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          style="width: 100%;padding-top: 15px;"
      >
      <el-table-column label="类型" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag >
            {{ row.type | typeFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地点" width="100" align="center">
        <template slot-scope="{row}">
          {{ row.areaName }}
        </template>
      </el-table-column>
      <el-table-column label="时间" width="150" align="center">
        <template slot-scope="{row}">
          {{ row.time }}
        </template>
      </el-table-column>
      <el-table-column label="具体详情" width="150" align="center">
        <template  slot-scope="scope">
          <img v-if="scope.row.source &&scope.row.type!==2" :src="'data:image/png;base64,'+scope.row.source"  min-width="70" height="70"
               @click="showPic('data:image/png;base64,'+scope.row.source)"/>
          <el-button v-if="scope.row.type===2"  @click="showVideo(scope.row.source)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="相关人员" width="150" align="center">
        <template slot-scope="{row}">
          {{ row.related }}
        </template>
      </el-table-column>
      <el-table-column label="记录描述"  align="center">
        <template slot-scope="{row}">
          {{ row.description }}
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
          align="center"
          :current-page="currentPage"
          :page-sizes="[1,5,10,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
          style="width: 90% ;margin-top:20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <!-- 图片预览   放在表格外面，这是个弹出框-->
      <el-dialog :visible.sync="dialogVisible" style="border-radius:7px; margin-top: 5px" :modal="false" title="图片预览" height="40%">
        <img :src="previewPic" width="100%" />
<!--        <img  v-if="type===2" :src="'http://127.0.0.1:5000/video_feed?url='+source" width="100%" :before-close="close"/>-->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">OK</el-button>
          </span>
      </el-dialog>
      <!-- 图片预览 -->
    </div>
</template>

<script>
import {getRecord, getByArea, getByType, getByDate} from "@/api/recordApi";

const typeOptions = [
  { key: '0', display_name: '区域入侵' },
  { key: '1', display_name: '老人跌倒' },
  { key: '2', display_name: '交互检测' },
  { key: '3', display_name: '情绪异常' },
  { key: '4', display_name: '火灾报警' },
  { key: '5', display_name: '陌生人检测' },
  { key: '6', display_name: '吸烟行为检测' }
]
const TypeKeyValue = typeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

  export default {
    name: 'RecordTable',
    filters: {
      typeFilter(type) {
        return TypeKeyValue[type]
      },
    },
    data() {
      return {
        type:null,
        video:null,
        refresh:false,
        list: [],
        typeOptions,
        listQuery: {
          importance: undefined,
          parameter: undefined
        },
        dialogVisible: false,
        previewPic: "",
        importanceOptions: ['地点', '事件类型', '时间'],
        temp: {
            name: '',
            sex: '',
            age: '',
            type: '',
            hasCaptured: 0
        },
        dialogStatus: '',
        dialogPvVisible: false,
        currentPage: 1, // 当前页码
        total: 0, // 总条数
        pageSize: 5 // 每页的数据条数
      }
    },
    created() {
      this.getList()
    },
    methods: {
      close(){
        this.type = null
      },
      showPic(url) {
        this.previewPic = url;
        this.dialogVisible = true;
      },
      showVideo(url) {
        // this.type = 2
        // this.video = url;
        this.previewPic = 'http://127.0.0.1:5000/video_feed?src='+url
        this.dialogVisible = true
      },
      getList() {
        getRecord().then(res => {
          console.log(res);
          this.list = res.result;
          this.total = res.result.length;
        }).catch(err => {
          console.log(err);
        })
      },
      iconClick() {
        this.refresh = !this.refresh
        this.getList();
        this.listQuery = {importance: undefined,parameter: undefined};
        setTimeout(() => {
          this.refresh = !this.refresh
        }, 5000)
      },
      resetTemp() {
        this.temp = {
          name: '',
          sex: '',
          age: '',
          type: '',
          hasCaptured: 0
        }
      },
      handleFilter() {
        if (this.listQuery.importance === '') {
          this.getList()
        } else {
          if(this.listQuery.importance === '地点'){
            getByArea(this.listQuery.parameter).then(response => {
              this.list = response.result
            }).catch(error => {
              console.log(error)
            })
          }
          if(this.listQuery.importance === '事件类型'){
            console.log(this.listQuery.parameter)
            getByType(this.listQuery.parameter).then(response => {
              this.list = response.result
            }).catch(error => {
              console.log(error)
            })
          }
          if(this.listQuery.importance === '时间'){
            getByDate(this.listQuery.parameter).then(response => {
              this.list = response.result
            }).catch(error => {
              console.log(error)
            })
          }

        }
      },
      getSortClass: function(key) {
        const sort = this.listQuery.sort
        return sort === `+${key}` ? 'ascending' : 'descending'
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.currentPage = 1
        this.pageSize = val
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
      }
    }
  }
  </script>

  <style scoped>
  .blue-button {
    background-color: #E4F2F5;
    /* 其他样式属性 */
  }
  </style>
